<template>
  <div>

    <!--1.添加课程计划按钮-->
    <!--设置点击事件，当点击后，将数据更改为true，进而更改visible.sync的值为true，
      该值为true代表显示dialog，显示添加课程计划的dialog弹窗-->
    <el-button type="primary" @click="teachPlanAddFormVisible = true">添加课程计划</el-button>


    <!--2.课程计划的展示树-->
    <!--
       树组件相关属性：
       default-expand-all：是否默认展开所有节点，默认值为false
       props：节点对应参数
       node-key：节点唯一标识
       expand-on-click-node:是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
       render-content:树节点的内容区的渲染，在该树中，在每个节点上添加选择视频、修改、删除按钮
    -->
    <el-tree
      :data="teachPlanList"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

    <!--3.添加课程计划的弹窗内容-->
    <!--   visible:是否显示dialog-->
    <el-dialog title="添加课程计划" :visible.sync="teachPlanAddFormVisible">
      <el-form ref="teachPlanAddForm" :model="teachPlanActive" label-width="140px" style="width:600px;"
               :rules="teachPlanRules">
        <el-form-item label="上级结点">
          <!--clearable设置选项可清空-->
          <el-select v-model="teachPlanActive.parentid" clearable placeholder="不填表示根结点">
            <!-- 遍历课程计划课程以下的子节点-->
            <el-option
              v-for="item in teachPlanList"
              :key="item.id"
              :label="item.pname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--prop:设置表单该字段为必填项，使用validate时，代表该字段是必填的-->
        <el-form-item label="章节/课时名称" prop="pname">
          <el-input v-model="teachPlanActive.pname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="teachPlanActive.ptype">
            <el-radio class="radio" label='1'>视频</el-radio>
            <el-radio class="radio" label='2'>文档</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--auto-complete="off":设置input框不会缓存输入的数据-->
        <el-form-item label="学习时长（分钟）  请输入数字">
          <el-input type="number" v-model="teachPlanActive.timelength" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序字段">
          <el-input v-model="teachPlanActive.orderby" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节/课时介绍" prop="description">
          <el-input type="textarea" v-model="teachPlanActive.description"></el-input>
        </el-form-item>
        <!--        <el-form-item label="状态" prop="status">-->
        <!--          <el-radio-group v-model="teachPlanActive.status">-->
        <!--            <el-radio class="radio" label="0">未发布</el-radio>-->
        <!--            <el-radio class="radio" label='1'>已发布</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" v-on:click="addTeachPlan">提交</el-button>
          <el-button type="primary" v-on:click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--4.修改课程计划的弹窗内容-->
    <el-dialog title="修改课程计划" :visible.sync="teachPlanEditFormVisible">
      <el-form ref="teachPlanEditForm" :model="teachPlanActive" label-width="140px" style="width:600px;"
               :rules="teachPlanRules">
        <el-form-item label="上级结点">
          <el-select v-model="teachPlanActive.parentid" clearable placeholder="不填表示根结点">
            <!-- 遍历课程计划课程以下的子节点-->
            <el-option
              v-for="item in teachPlanList"
              :key="item.id"
              :label="item.pname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节/课时名称" prop="pname">
          <el-input v-model="teachPlanActive.pname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="teachPlanActive.ptype">
            <el-radio class="radio" label='1'>视频</el-radio>
            <el-radio class="radio" label='2'>文档</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学习时长（分钟）  请输入数字">
          <el-input type="number" v-model="teachPlanActive.timelength" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序字段">
          <el-input v-model="teachPlanActive.orderby" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节/课时介绍" prop="description">
          <el-input type="textarea" v-model="teachPlanActive.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="updateTeachPlan">提交</el-button>
          <el-button type="primary" v-on:click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--5.选择视频的弹窗内容-->
    <el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible" width="85%">
      <media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list>
    </el-dialog>

  </div>
</template>
<script>
    let id = 1000;
    import * as courseApi from '../../api/course';
    import utilApi from '../../../../common/utils';
    import * as systemApi from '../../../../base/api/system';
    import mediaList from '@/module/media/page/media_list.vue';

    export default {
        components: {
            mediaList
        },
        data() {
            return {
                mediaFormVisible: false,    //控制选择视频窗口在页面是否直接显示
                teachPlanAddFormVisible: false,//控制添加窗口在页面直接是否显示
                teachPlanEditFormVisible: false,//控制修改窗口在页面直接是否显示
                teachPlanList: [{         //课程计划树组件默认数据
                    id: 1,
                    pname: '一级 1',
                    children: [{
                        id: 4,
                        pname: '二级 1-1',
                        children: [{
                            id: 9,
                            pname: '三级 1-1-1'
                        }, {
                            id: 10,
                            pname: '三级 1-1-2'
                        }]
                    }]
                }],
                //修改默认节点属性对应参数
                defaultProps: {
                    children: 'children',
                    label: 'pname'
                },
                //添加表单验证规则
                teachPlanRules: {
                    pname: [
                        {required: true, message: '请输入课程计划名称', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'blur'}
                    ]
                },
                //添加课程计划的数据模型
                teachPlanActive: {},
                teachPlanId: ''
            }
        },
        methods: {
            //选择视频，打开窗口
            choosevideo(data) {
                //得到当前的课程计划id
                this.teachPlanId = data.id;
                //设置mediaFormVisible为true，即显示选择视频的弹窗
                this.mediaFormVisible = true;
            },
            //保存选择的视频
            choosemedia(mediaId, fileOriginalName, mediaUrl) {
                //保存视频到课程计划表中
                let teachPlanMedia = {};
                teachPlanMedia.mediaId = mediaId;
                teachPlanMedia.mediaFileOriginalName = fileOriginalName;
                teachPlanMedia.mediaUrl = mediaUrl;
                teachPlanMedia.courseId = this.courseid;
                //课程计划
                teachPlanMedia.teachplanId = this.teachPlanId;
                courseApi.savemedia(teachPlanMedia).then(res => {
                    if (res.success) {
                        this.$message.success("选择视频成功");
                        //查询课程计划
                        this.findTeachPlan()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            //添加课程计划
            addTeachPlan() {
                //校验表单必填项，即使用prop属性的字段
                this.$refs.teachPlanAddForm.validate((valid) => {
                    if (valid) {
                        //调用api方法
                        //将课程id设置到teachPlanActive(表单数据)
                        this.teachPlanActive.courseid = this.courseid;
                        //设置添加时id为空
                        this.teachPlanActive.id = null;
                        courseApi.addTeachPlan(this.teachPlanActive).then(res => {
                            if (res.success) {
                                this.$message.success("添加成功");
                                //刷新树
                                this.findTeachPlan();
                                this.teachPlanAddFormVisible = false;    //设置添加课程计划窗口不显示
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //修改课程计划
            updateTeachPlan() {
                //校验表单必填项，即包含prop属性的字段
                this.$refs.teachPlanEditForm.validate((valid) => {
                    if (valid) {
                        //将课程id设置到teachPlanActive(表单数据)
                        this.teachPlanActive.courseid = this.courseid;
                        courseApi.updateTeachPlan(this.teachPlanActive).then(res => {
                            if (res.success) {
                                this.$message.success("修改成功");
                                //刷新树
                                this.findTeachPlan();
                                //设置修改课程计划窗口不显示
                                this.teachPlanEditFormVisible = false;
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //重置表单
            resetForm() {
                //将表单数据置为空
                this.teachPlanActive = {}
            },
            append(data) {
                const newChild = {id: id++, label: 'testtest', children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
            },
            //打开修改页面弹窗，回显课程计划信息
            edit(data) {
                //data.id为选择的课程计划id
                console.log(data.id);
                //获取课程计划信息，用于修改页面数据回显
                courseApi.getTeachPlan(data.id).then(res => {
                    console.log(res);
                    //设置修改页面表单数据
                    this.teachPlanActive = res;
                    let arr = [];
                    //获取节点id
                    this.teachPlanList.forEach(function (value, index, array) {
                        arr.push(value.id);
                    });
                    //若父id不在节点id数据，则清空上级节点框
                    if (arr.indexOf(res.parentid) == '-1') {
                        console.log("上级节点为根节点");
                        this.teachPlanActive.parentid = '';
                    }
                });
                //设置修改页面弹窗显示
                this.teachPlanEditFormVisible = true;
            },
            //删除课程计划
            remove(node, data) {
                this.$confirm('确认删除此条数据吗？', '提示', {}).then(() => {

                    courseApi.deleteTeachPlan(data.id).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //删除成功之后调用查询方法，重新加载表格数据
                            this.findTeachPlan();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message
                            });
                        }
                    });
                })
            },
            //渲染树的每一个节点，添加如下页面内容
            renderContent(h, {node, data, store}) {
                return (
                    <span
                        style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                    <span>
                      <span>{node.label}</span>
                    </span>
                    <span>
                      <el-button  style="font-size: 12px;" type="text"
                                 on-click={() => this.choosevideo(data)}> {data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button>
                      <el-button style="font-size: 12px;" type="text" on-click={() => this.edit(data)}>修改</el-button>
                      <el-button style="font-size: 12px;" type="text"
                                 on-click={() => this.remove(node, data)}>删除</el-button>
                    </span>
                  </span>
                );
            },
            //加载课程计划树
            findTeachPlan() {
                //置空默认课程计划节点数据
                this.teachPlanList = [];
                //查询课程计划
                courseApi.findTeachPlanList(this.courseid).then(res => {
                    if (res && res.children) {
                        //赋值课程计划树的节点数据
                        this.teachPlanList = res.children;
                    }
                })
            }
        },
        mounted() {
            //课程id
            this.courseid = this.$route.params.courseid;
            //在页面加载时根据课程id查询课程计划
            this.findTeachPlan()
        }
    }
</script>
<style>

</style>
